<template>
  <div class="file-style-box">
    <div class='upload-file-item'>
      <img :src="getEnd(file)" alt="">
      <div>
        <p class='file-name'>
          <span class='name'>
            <el-link :underline="false" @click="previewHandler(file.url)">{{file.name}}</el-link>
          </span>
        </p>
      </div>
    </div>
    <el-dialog
      title="图片预览"
      width="800px"
      class="imgDlgBox"
      :visible.sync="imgDlgVisible"
      :close-on-click-modal="true"
      :modal="false"
      append-to-body
    >
      <img :src="imgUrl" alt="">
    </el-dialog>
  </div>

</template>

<script>
  export default {
    props: {
      file: {
        type: Object,
        default: {}
      },
      showDel: {
        type: Boolean,
        default: false
      }
    },
    created() {
      // console.log('组件内 this.file:',this.file)
    },
    data() {
      return {
        imgDlgVisible: false,
        imgUrl: '',
        pdfUrl: '',
        imgsrc: {
        }
      }
    },
    filters: {
      toKB(val) {
        return (Number(val) / 1024).toFixed(0);
      }
    },
    methods: {
      getEnd(file){
        if(!file.name) return
        if (this.isPdf(file)) return 'https://contest-manage-gmz.oss-cn-guangzhou.aliyuncs.com/pdf.png'
        if (this.isTxt(file)) return 'https://contest-manage-gmz.oss-cn-guangzhou.aliyuncs.com/txt.png'
        if (this.isDoc(file)) return 'https://contest-manage-gmz.oss-cn-guangzhou.aliyuncs.com/doc.png'
        if (this.isPpt(file)) return 'https://contest-manage-gmz.oss-cn-guangzhou.aliyuncs.com/ppt.png'
        if (this.isXls(file)) return 'https://contest-manage-gmz.oss-cn-guangzhou.aliyuncs.com/xls.png'
      },
      isPdf(file){
        let suffix = file.name.split('.')[1];
        return suffix.indexOf('pdf') !== -1;
      },
      isImg(file){

      },
      isTxt(file){
        let suffix = file.name.split('.')[1];
        return suffix.indexOf('txt') !== -1;
      },
      isDoc(file){
        let suffix = file.name.split('.')[1];
        return suffix.indexOf('doc') !== -1;
      },
      isPpt(file){
        let suffix = file.name.split('.')[1];
        return suffix.indexOf('ppt') !== -1;
      },
      isXls(file){
        let suffix = file.name.split('.')[1];
        return suffix.indexOf('xls') !== -1;
      },
      downLoadHandler(){

      },
      cancelHanlder(item) {
        this.$emit('cancel', item)
      },
      previewHandler(url) {
        if (url) {
          window.open(url,'_blank');
        }
      },
    }
  }
</script>
<style lang='scss'>
  .file-style-box {
    padding: 10px 10px 0 0;
  }

  .imgDlgBox {
    .el-dialog {
      .el-dialog__body {
        text-align: center;

        img {
          width: 700px;
          height: auto;
        }
      }
    }
  }

  .upload-file-item {
    background: #FAFAFA;
    border-radius: 4px;
    padding: 5px 10px;
    margin-bottom: 10px;
    display: flex;
    font-size: 14px;
    width: 236px;
    box-sizing: border-box;
    position: relative;

    img {
      width: 32px;
      height: 40px;
      margin-top: 5px;
      margin-right: 10px;
    }

    .option {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .file-name {
      width: 163px;
      display: flex;
      flex-wrap: nowrap;
      font-size: 14px;
      color: #333;
      font-weight: 400;

      .name {
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .end {
        flex: 0 0 auto;
      }

      .el-button {
        border: none;
        padding: 0px;
        width: 90%;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }

    .size {
      color: #969696;
    }

    .success {
      color: #78C06E;
    }

    .delBtn {
      position: absolute;
      top: -14px;
      right: -18px;
      cursor: pointer;

      img {
        width: 16px;
        height: 16px
      }
    }

    // .del {
    //   color: #E1251B;
    //   cursor: pointer;
    // }
    .preview {
      color: #0286DF;
      cursor: pointer;
    }

    .mr10 {
      margin-right: 10px;
    }
  }
</style>
